* {
  margin: 0;
  padding: 0;
  /*inherit使得元素获取其父元素的计算值*/
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}
body {
  font-family: 'Press Start 2P', sans-serif;
  color: #eee;
  background-color: #222;
  /* background-color: #60b347; */
}
/*统一按钮样式*/
.btn {
  border: none;
  background-color: #cecaca;
  color: #222;
  font-size: 2rem;
  font-family: '华文琥珀';
  padding: 2rem 2rem;
  border-radius: 5%;
  /*鼠标移入样式*/
  cursor: pointer;
}
.btn:hover {
  background-color: #6d6666;
}

/*布局*/
/*上端部分*/
/*子绝父相布局*/
header {
  /*相对定位*/
  position: relative;
  /*占视口高度35%*/
  height: 35vh;
  /*下边框*/
  border-bottom: 7px solid #eee;
}
h1 {
  font-size: 4rem;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 40%;
  /*在页面X轴中央位置，但自身也有宽度高度，所以transform二次调整*/
  left: 50%;
  /*以自身为中心偏移自身50%所以实现居中*/
  transform: translate(-50%, -50%);
}
.between {
  /*em 和 rem 分别相对于父元素和根元素的字体大小。*/
  font-size: 3rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
}
.again {
  position: absolute;
  top: 1rem;
  left: 2rem;
}
.number {
  background: #eee;
  color: #333;
  width: 15rem;
  padding: 3rem 0rem;
  font-family: '华文琥珀';
  font-size: 6rem;
  text-align: center;
  position: absolute;
  /*在页面中央位置，但自身也有宽度高度，所以transform二次调整*/
  left: 50%;
  bottom: 0;
  /*以自身为中心偏移自身50%所以实现居中*/
  transform: translate(-50%, 50%);
}
/*下端部分*/
main {
  font-family: '华文琥珀';
  /*占视口高度65%*/
  height: 65vh;
  color: #eee;
  /*弹性布局*/
  display: flex;
  align-items: center;
  /*均匀排列每个元素，每个元素周围分配相同的空间*/
  justify-content: space-around;
}
/*左侧部分*/
.left {
  width: 52rem;
  /* 弹性布局 */
  display: flex;
  /*文本内容拍成列的方向*/
  flex-direction: column;
  /*flex 元素的外边距框在交叉轴上居中对齐。如果元素的交叉轴尺寸大于 flex 容器，它将在两个方向上等距溢出。*/
  align-items: center;
}
.guess {
  /*input变为块元素*/
  display: block;
  width: 20rem;
  background: none;
  border: 1rem solid #eee;
  padding: 2.5rem;
  font-size: 5rem;
  font-family: inherit;
  color: inherit;
  text-align: center;
  margin-bottom: 3rem;
}

/*右侧部分*/
.right {
  width: 52rem;
  font-size: 4rem;
  /* border: 1px solid white; */
}

.message {
  margin-bottom: 8rem;
}

.label-score {
  margin-bottom: 2rem;
}
